<template>
  <div>
    <div v-if="showType ===1">
      <div class="filter-container" style="margin-left: 10px;margin-top: 10px">
        <el-input v-model="listQueryGoods.title" clearable placeholder="商品名称" style="width: 200px;"
                  class="filter-item" @keyup.enter.native="getListGoods()"/>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" circle
                   @click="getListGoods"></el-button>

      </div>
      <el-row>
        <el-col :span="span" v-for="(item,index) in listGoods" :key="index" @click.native="goTrends(item)">
          <div class="box" style="cursor: pointer">
            <el-image style="height: 75px;margin-top: 10px" class=""
                      :src="item.mainImg+'?'+$globalImageProcessingSuffix">
              <div slot="error" class="image-slot">
                <el-image style="height: 75px;" class=""
                          :src="'https://img.fscmkjznb.com/static/noImg.jpeg?'+$globalImageProcessingSuffix"/>
              </div>
            </el-image>
            <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
              <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.title }}</div>
            </el-tooltip>
            <div>素材量：<span style="color: green">{{ item.trendsCountNum ? item.trendsCountNum : 0 }}</span></div>
          </div>
        </el-col>
      </el-row>
      <pagination v-show="totalGoods>0" :total="totalGoods" :page.sync="listQueryGoods.page"
                  :pageSizes="[10,20, 30, 50,80,500]"
                  :limit.sync="listQueryGoods.pageSize" @pagination="getListGoods"
      />


    </div>

    <div class="app-container" v-else>
      <el-button class="filter-item" size="mini" type="primary" icon="el-icon-s-promotion" @click="backgoods">
        返回商品页面
      </el-button>
      当前商品：{{ currentGoodsTitle }}
      <el-tabs v-model="activeName" @tab-click="handleClickTab">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="短视频素材" name="1"></el-tab-pane>
        <!--				<el-tab-pane label="上新" name="2"></el-tab-pane>-->
        <el-tab-pane label="图片素材" name="3"></el-tab-pane><!--之前叫‘种草’-->
        <!--        <el-tab-pane label="买家秀" name="4"></el-tab-pane>-->
      </el-tabs>
      <div class="filter-container">
        <el-input v-model.number="listQuery.walkMemberUid" clearable placeholder="创作号" style="width: 200px;"
                  class="filter-item" @keyup.enter.native="getList()"
        />
        <!-- <el-select v-model="listQuery.type" placeholder="类型" class="filter-item" clearable filterable>
            <el-option
              v-for="item in typeOptions"
              :key="item.key"
              :label="item.text"
              :value="item.key">
            </el-option>
          </el-select> -->
        <el-select v-model="listQuery.status" placeholder="状态" class="filter-item" clearable filterable>
          <el-option
            v-for="item in statusOptions"
            :key="item.key"
            :label="item.text"
            :value="item.key"
          >
          </el-option>
        </el-select>
        <el-select v-model="listQuery.downLoadStatus" placeholder="下载状态" class="filter-item" clearable filterable>
          <el-option
            v-for="item in downloadStatusOptions"
            :key="item.key"
            :label="item.text"
            :value="item.key"
          >
          </el-option>
        </el-select>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" circle @click="getList"></el-button>
        <br>
        <el-button-group>
          <el-button class="filter-item" size="mini" type="primary" icon="el-icon-s-promotion" @click="handleCreate">
            发布
          </el-button>
          <el-button class="filter-item" size="mini" type="danger" icon="el-icon-delete" @click="handleDelete"
                     style="margin-left: 10px"
          >删除
          </el-button>
          <!--        <el-button class="filter-item" size="mini" type="success" icon="el-icon-s-promotion" @click="createWatermark"  style="margin-left: 10px">-->
          <!--          重新生成水印-->
          <!--        </el-button>-->
        </el-button-group>
      </div>
      <div style="margin-bottom: 10px">
        <!--        <el-select v-model="delGoodsId" placeholder="所属商品" disabled class="filter-item" clearable filterable @change="chooseGoods">-->
        <!--          <el-option-->
        <!--            v-for="item in goodsOptions"-->
        <!--            :key="item.id"-->
        <!--            :label="item.title"-->
        <!--            :value="item.id"-->
        <!--          >-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <el-button class="filter-item" size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteByGoods"

        >删除当前视频下所有素材
        </el-button>
        <el-button class="filter-item" size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteByDown"

        >删除已下载素材
        </el-button>
      </div>

      <el-table
        :key="tableKey"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >

        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="ID" prop="id" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.walkTrends.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创作号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.walkTrends.walkMemberUid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
          <span v-if="scope.row.walkTrends.type == 1"
                style="color: #C03639;"
          >{{ scope.row.walkTrends.type | typeFilter }}</span>
            <span v-if="scope.row.walkTrends.type == 2"
                  style="color: #00bcbc;"
            >{{ scope.row.walkTrends.type | typeFilter }}</span>
            <span v-if="scope.row.walkTrends.type == 3"
                  style="color: #c885c8;"
            >{{ scope.row.walkTrends.type | typeFilter }}</span>
            <span v-if="scope.row.walkTrends.type == 4"
                  style="color: #00cb00;"
            >{{ scope.row.walkTrends.type | typeFilter }}</span>
          </template>
        </el-table-column>
        <!--      <el-table-column label="图片" min-width="100px">-->
        <!--        <template slot-scope="scope">-->
        <!--          <div v-if="scope.row.walkTrends.images">-->
        <!--            <el-image-->
        <!--                v-for="(item,index) in scope.row.walkTrends.images.split('|')"-->
        <!--                :key="index"-->
        <!--                style="height: 30px;margin-left: 5px;"-->
        <!--                :src="item"-->
        <!--                :preview-src-list="scope.row.walkTrends.images.split('|')">-->
        <!--            </el-image>-->
        <!--          </div>-->
        <!--          <div v-if="scope.row.walkTrends.videoUrl">-->
        <!--&lt;!&ndash;            <el-image&ndash;&gt;-->
        <!--&lt;!&ndash;                style="height: 30px;margin-left: 5px;"&ndash;&gt;-->
        <!--&lt;!&ndash;                :src="scope.row.walkTrends.videoUrl+'?vframe/jpg/offset/0' "&ndash;&gt;-->
        <!--&lt;!&ndash;                :preview-src-list="[scope.row.walkTrends.videoUrl+'?vframe/jpg/offset/0']">&ndash;&gt;-->
        <!--&lt;!&ndash;            </el-image>&ndash;&gt;-->

        <!--&lt;!&ndash;            <video style="height: 30px;margin-left: 5px;" :src="scope.row.walkTrends.videoUrl"></video>&ndash;&gt;-->

        <!--            <video id="playVideosTable" width="5%" height="5%" webkit-playsinline="true" preload="auto" controls="controls">-->
        <!--              <source :src="scope.row.walkTrends.videoUrl" type="video/mp4">-->
        <!--            </video>-->
        <!--          </div>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="所属商品" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.trendsGoodsList[0].goodsName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="浏览量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.walkTrends.viewNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="点赞" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.walkTrends.collectionNum }}</span>
          </template>
        </el-table-column>
        <!--      <el-table-column label="评论" width="70" align="center">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ scope.row.walkTrends.commentNum }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="创建时间" align="center" prop="addTime">
          <template slot-scope="scope">
            <span>{{ scope.row.walkTrends.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.walkTrends.status == 1 ? 'success' : 'danger' ">
              {{ scope.row.walkTrends.status | statusFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下载状态(点击查看)" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.walkTrends.belongMemberId != 0 ? 'danger' : 'success' "
                    :style="scope.row.walkTrends.belongMemberId != 0 ? 'cursor: pointer':''"
                    @click="showDownLoadInfo(scope.row.walkTrends)">
              {{ scope.row.walkTrends.belongMemberId | downLoadStatusFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" width="200px" class-name="small-padding" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="修改文案" placement="top">
                <el-button type="primary" icon="el-icon-s-management" size="mini"
                           @click="updateContent(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <el-button type="primary" icon="el-icon-s-promotion" size="mini"
                           @click="handleViewTrends(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="播放" placement="top"
                          v-if="scope.row.walkTrends.type == 1">
                <el-button type="primary" icon="el-icon-video-camera-solid" size="mini"
                           @click="viewVideo(scope.row.walkTrends)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看评论" placement="top">
                <el-button type="primary" icon="el-icon-s-comment" size="mini"
                           @click="handleViewComment(scope.row.walkTrends.id)"
                ></el-button>
              </el-tooltip>
            </el-button-group>

          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                  @pagination="getList"
      />

      <!--发布-->
      <el-dialog title="发布" append-to-body :visible.sync="dialogFormVisible" :close-on-click-modal="false"
                 @open="dialogOpen" @close="dialogClose"
      >
        <el-alert
          class="warn-content"
          title=""
          type="success"
          :closable="false"
        >
          <div style="color: red">注意：文件上传请检查文件名称，请勿上传特殊字符文件名文件，特殊字符包括：
            `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~
          </div>
          <div>保存此次数据：会覆盖上次保存的操作数据</div>
          <div>恢复上次数据：可恢复上次保存的操作数据,但是会覆盖当前表单数据，请谨慎操作</div>

        </el-alert>
        <br/>


        <div style="margin-left: 8px">
          <el-form ref="dataForm" :model="trendsForm" label-width="100px" label-position="right"
                   style="margin-top: 10px;width: 100%;  "
          >

            <!--          <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '请选择类型', trigger: 'blur' }]" style="margin-left:-53px">-->
            <el-radio-group v-model="trendsForm.type" style="margin-top: 10px;display: flex">
              <div style="margin-top: 10px;display: flex">
                <el-radio :label="1" border defualt>短视频素材<span style="color:red;">({{
                    tableDataVideo.length
                  }}条)</span>
                </el-radio>
                <!-- <el-radio :label="2" border>宝贝上新</el-radio>-->
                <el-radio :label="3" border>图片素材<span style="color:red;">({{ tableDataImg.length }}条)</span>
                </el-radio>
                <!--之前叫'种草'-->
                <!-- <el-radio :label="4" border>买家秀</el-radio> -->
              </div>

              <div style="margin-top: 12px;margin-left: 10px;display: flex">
                <el-button class="mb10" size="mini" type="warning" @click="storeDataFromStore">保存当前数据</el-button>
                <el-button class="mb10" size="mini" type="warning" @click="restoreDataFromStore">恢复上次数据
                </el-button>
              </div>

              <div style="display: flex;margin-top: 10px;margin-left: 10px">
                <!--                后端上传-->
                <!--                <MultipleSourceVideoTable  @successCBK="imageSuccessCBKVideo"/>-->
                <!--                <MultipleSourceImgTable  @successCBK="imageSuccessCBKImg"/>-->
                <!--                前端上传-->
                <!--                这里无需生成后台水印副本，因为可以直接前端处理-->
                <QiniuMultipleUploadTable :buttonType="'button'" :isWatermark="false" :type="2" :title="'批量视频导入'"
                                          :source="1"
                                          @successCBK="imageSuccessCBKVideo"
                />
                <QiniuMultipleUploadTable :buttonType="'button'" :isWatermark="false" :type="1" :title="'批量图片导入'"
                                          :source="1"
                                          @successCBK="imageSuccessCBKImg" style="margin-left: 10px"
                />
              </div>
            </el-radio-group>
            <!--          </el-form-item>-->
            <div style="margin-top: 10px">
              <div class="add-table" v-if="trendsForm.type===1">
                <el-button class="mb10" size="mini" type="primary" @click="addTableRowVideo">新 增</el-button>
                <el-button class="mb10" size="mini" type="danger" @click="clearTableRowVideo">清 空</el-button>
                <el-button class="filter-item" size="mini" type="warning" icon="el-icon-delete"
                           @click="openBatchEditContentShow"
                           style="margin-left: 10px"
                >批量操作文案
                </el-button>
                <el-button class="filter-item" size="mini" type="warning" icon="el-icon-delete"
                           @click="openBatchEditGoodsShow"
                           style="margin-left: 10px"
                >批量修改商品
                </el-button>
                <!--              <el-scrollbar style="height:400px;">-->
                <el-table :row-key="getRowKeys" @select-all="selectAllVideo" :data="filteredDataVideo"
                          v-loadmore="handelLoadmoreVideo"
                          :data-size="tableDataVideo.length" stripe highlight-current-row border
                          ref="addTableRowRefVideo"
                          style="margin-top: 10px;width: 100%" height="360"
                          @selection-change="handleSelectionChange2Video"
                >

                  <el-table-column type="selection" width="55" align="center"
                                   :reserve-selection="true"></el-table-column>
                  <el-table-column type="index" label="序号" align="center" width="100">
                    <template slot-scope="scope">
                      {{ scope.row.index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="文案" align="center" width="290">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="scope.row.content"
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="视频（重新上传）" align="center" width="150">
                    <template slot-scope="scope">
                      <!--                    <SingleVideoTable @inputWithWatermarkVideoMethod="inputWithWatermarkVideoMethod" :currentScope="scope"-->
                      <!--                                      v-model="scope.row.videoUrl" :value="scope.row.videoUrl"/>-->
                      <QiniuSingleUploadTable :type="2" :title="'视频导入'" v-model="scope.row.videoUrl"
                                              :value="scope.row.videoUrl"
                                              @inputWithWatermarkVideoMethod="inputWithWatermarkVideoMethod"
                                              :currentScope="scope" :source="1"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="商品" align="center" width="150">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.goodsId" placeholder="请选择" filterable>
                        <el-option
                          v-for="item in goodsOptions"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" icon="el-icon-delete"
                                 @click="handleDeleteRow(scope.$index,tableDataVideo)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--              </el-scrollbar>-->
              </div>
              <div class="add-table" v-if="trendsForm.type===3">
                <el-button class="mb10" size="mini" type="primary" @click="addTableRowImg">新 增</el-button>
                <el-button class="mb10" size="mini" type="danger" @click="clearTableRowImg">清 空</el-button>
                <el-button class="filter-item" size="mini" type="warning" icon="el-icon-delete"
                           @click="openBatchEditContentShow"
                           style="margin-left: 10px"
                >批量操作文案
                </el-button>
                <el-button class="filter-item" size="mini" type="warning" icon="el-icon-delete"
                           @click="openBatchEditGoodsShow"
                           style="margin-left: 10px"
                >批量修改商品
                </el-button>
                <!--              <el-scrollbar style="height:400px;">-->
                <el-table :row-key="getRowKeys" @select-all="selectAllImg" :data="filteredDataImg"
                          v-loadmore="handelLoadmoreImg"
                          :data-size="tableDataImg.length" stripe highlight-current-row border ref="addTableRowRefImg"
                          style="margin-top: 10px;width: 100%" height="360"
                          @selection-change="handleSelectionChange2Img"
                >


                  <el-table-column type="selection" width="55" align="center"
                                   :reserve-selection="true"></el-table-column>
                  <el-table-column type="index" label="序号" align="center" width="100">
                    <template slot-scope="scope">
                      {{ scope.row.index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column type="index" label="文案" align="center" width="290">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="scope.row.content"
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column type="index" label="图片(重新上传)" align="center" width="150">
                    <template slot-scope="scope">
                      <!--                    <SingleImageTable @inputWithWatermarkImgMethod="inputWithWatermarkImgMethod" :currentScope="scope"-->
                      <!--                                      v-model="scope.row.images"/>-->
                      <QiniuSingleUploadTable :type="1" :title="'图片导入'" v-model="scope.row.images"
                                              :value="scope.row.images"
                                              @inputWithWatermarkImgMethod="inputWithWatermarkImgMethod"
                                              :currentScope="scope" :source="1"
                      />

                    </template>
                  </el-table-column>
                  <el-table-column type="index" label="商品" align="center" width="150">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.goodsId" placeholder="请选择">
                        <el-option
                          v-for="item in goodsOptions"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" icon="el-icon-delete"
                                 @click="handleDeleteRow(scope.$index,tableDataImg)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--              </el-scrollbar>-->
              </div>
            </div>

          </el-form>
          <div style="text-align:right;">
            <el-button type="danger" @click="dialogFormVisible=false">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </div>
        </div>

      </el-dialog>

      <!--视频弹窗-->
      <el-dialog title="视频" :visible.sync="dialogVideoVisible" :destroy-on-close="true">
        <video id="playVideos" width="100%" height="100%" webkit-playsinline="true" preload="auto" controls="controls">
          <source :src="videoUrl" type="video/mp4">
        </video>
      </el-dialog>

      <!--查看详情-->
      <el-dialog title="查看" :visible.sync="dialogViewVisible" :destroy-on-close="true">
        <div class="flex">
          <el-image
            class="flex f-s-0 margin-r8"
            style="height: 40px"
            :src="trendsDetail.walkMemberHeadImg"
          >
          </el-image>
          <div class="flex f-c">
            <span class="link-type" style="font-size: 12px;">{{ trendsDetail.walkMemberName }}</span>
            <span class="tips-class margin-t6">创作号: {{ trendsDetail.walkMemberUid }}</span>
          </div>
          <div class="flex f-j-e flex-1">
            <span class="tips-class" style="float: right;">{{ trendsDetail.addTime | parseTime }}</span>
          </div>
        </div>

        <div>
          <div style="display: flex"><span>文案：</span><span v-text="trendsDetail.content"
                                                             style="white-space: pre-wrap; font-size: 13px; padding: 10px;margin-top: -8px"
          ></span></div>

          <p v-if="trendsDetail.images" style="display: flex">
            原图：
            <el-image
              v-for="(item,index) in trendsDetail.images.split('|')"
              :key="index"
              style="width: 30%;margin-left: 5px;border-radius: 5px;"
              :src="item"
              :preview-src-list="trendsDetail.images.split('|')"
            >
            </el-image>

          </p>
          <p v-if="trendsDetail.videoUrl" style="display: flex">
            原视频：
            <video id="playVideos1" width="40%" height="100%" webkit-playsinline="true" preload="auto"
                   controls="controls"
            >
              <source :src="trendsDetail.videoUrl" type="video/mp4">
            </video>

          </p>
        </div>
        <div style="margin-top: 20px;">
          <span class="tips-class margin-r10" style="font-size: 13px;">浏览量({{ trendsDetail.viewNum }})</span>
          <span class="tips-class margin-r10" style="font-size: 13px;"><i
            class="el-icon-s-comment"
          ></i>评论({{ trendsDetail.commentNum }})</span>
          <span class="tips-class margin-r10" style="font-size: 13px;"><i
            class="el-icon-star-on"
          ></i>点赞({{ trendsDetail.collectionNum }})</span>
        </div>
      </el-dialog>

      <!--评论弹窗-->
      <el-dialog title="评论" :visible.sync="dialogCommentVisible">
        <el-empty description="暂无评论" v-if="!commentList || commentList.length == 0"></el-empty>

        <div v-for="(item,index) in commentList" class="comment comment-item" :key="index">
          <div class="flex">
            <el-avatar class="flex f-s-0 margin-r8 margin-t8"
                       size="small"
                       :src="item.walkTrendsComment.viewMemberHeadImg"
            ></el-avatar>
            <div class="flex flex-1 f-c margin-t12 padding-8">
              <span style="font-size: 13px;font-weight: bold;">{{ item.walkTrendsComment.viewMemberName }}</span>
              <span style="padding: 10px 0 10px 0; font-size: 13px;">{{ item.walkTrendsComment.content }}</span>
              <span class="tips-class flex f-j-s flex-1 w100" style="float: right;">
                  {{ item.walkTrendsComment.addTime | parseTime }}
                  <span style="font-size: 13px;"><i
                    class="el-icon-star-on"
                  ></i>{{ item.walkTrendsComment.likeNum }}</span>
                </span>

            </div>
          </div>

          <div v-for="(item2,index) in item.chilidCommentList" class="sub-item" :key="index">
            <div class="flex">
              <el-avatar class="flex f-s-0 margin-r8 margin-t8"
                         size="small" :src="item2.viewMemberHeadImg"
              ></el-avatar>
              <div class="flex flex-1 f-c margin-t12 padding-8">
                <span style="font-size: 13px;font-weight: bold;">{{ item2.viewMemberName }}</span>
                <span style="padding: 10px 0 10px 0; font-size: 13px;">{{ item2.content }}</span>
                <span class="tips-class flex f-j-s flex-1 w100" style="float: right;">{{ item2.addTime | parseTime }}
                <span style="font-size: 13px;"><i class="el-icon-star-on"></i>{{ item2.likeNum }}</span>
                </span>

              </div>
            </div>
          </div>

        </div>
        <pagination v-show="commentTotal>0" :total="commentTotal" :page.sync="commentListQuery.page"
                    :limit.sync="commentListQuery.pageSize" @pagination="getCommentList"
        />
      </el-dialog>
      <el-dialog
        title="文案批量编辑"
        :visible.sync="contentEditBatchShow"
        width="30%">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="batchEditContent"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="contentEditBatchShow = false">取 消</el-button>
    <el-button type="primary" @click="confirmEditBatchContent">确 定</el-button>
     </span>
      </el-dialog>

      <el-dialog
        title="所属商品批量编辑"
        :visible.sync="goodsEditBatchShow"
        width="30%">
        <el-select v-model="batchEditGoods" placeholder="请选择" filterable>
          <el-option
            v-for="item in goodsOptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
    <el-button @click="goodsEditBatchShow = false">取 消</el-button>
    <el-button type="primary" @click="confirmEditBatchGoods">确 定</el-button>
  </span>
      </el-dialog>


      <el-dialog
        title="文案编辑"
        :visible.sync="dialogUpdateContentVisible"
        width="30%">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="currentContent"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdateContentVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmEditContent">确 定</el-button>
  </span>
      </el-dialog>


      <el-dialog
        title="下载详情"
        :visible.sync="isShowDowmloadInfo"
        width="30%">
        <el-form ref="form" :model="formDownloadInfo" label-width="80px">
          <el-form-item label="下载时间">
            <span>{{ formDownloadInfo.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </el-form-item>
          <el-form-item label="下载人">
            <span>{{ formDownloadInfo.downloadWalkMemberName }}</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="isShowDowmloadInfo = false">关 闭</el-button>
  </span>
      </el-dialog>
    </div>
  </div>

</template>

<style>
.box {
  text-align: center;
  margin: 10px;
  height: 120px;
  background-color: #f0f0f0;
}

.tips-class {
  font-size: 12px;
  color: #999;
}

.comment-item {
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-bottom: 12px;
}

.comment .sub-item {
  padding: 10px;
  background-color: #e8ecef;
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 34px;
}
</style>

<script>
import {createWatermark, deleteTrends, getCommentList, getTrendsList} from '@/api/trends'
import {getListAndTrendsNum, getGoodsList} from '@/api/goods'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import ImageSource from '@/components/Upload/imageSource'
import MultipleUpload from '@/components/Upload/multipleImage'
import SingleVideoTable from '@/components/Upload/singleVideoTable'
import SingleImageTable from '@/components/Upload/singleImageTable'
import MultipleSourceVideoTable from '@/components/Upload/multipleSourceVideoTable'
import MultipleSourceImgTable from '@/components/Upload/multipleSourceImgTable'
import QiniuMultipleUploadTable from '@/components/Upload/qiniuMultipleUploadTable'
import QiniuSingleUploadTable from '@/components/Upload/qiniuSingleUploadTable'
import {
  deleteTrendsByDown,
  deleteTrendsByGoodsId,
  editTrends,
  getDownLoadInfo,
  handleDeleteByDown,
  publishTrendsBatch
} from '../../../api/trends'
import {addActionDataLog, getActionDataLog} from '../../../api/actionDataLog'
import {checkShopLevel} from '../../../api/shopLevel'
import {parseTime} from '../../../utils'

const typeOptions = [
  {key: 1, text: '短视频'},
  {key: 2, text: '上新'},
  {key: 3, text: '图片'}
  /* { key: 4, text: '买家秀' }, */
]

// arr to obj ,such as { CN : "China", US : "USA" }
const typeKeyValue = typeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})

const statusOptions = [
  {key: 0, text: '待审核'},
  {key: 1, text: '发布成功'},
  {key: 2, text: '不通过'},
  {key: 3, text: '草稿'}
]
const downloadStatusOptions = [
  {key: 1, text: '已被下载'},
  {key: 0, text: '未下载'}
]
// arr to obj ,such as { CN : "China", US : "USA" }
const statusKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})
const downloadStatusKeyValue = downloadStatusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})
export default {
  name: 'trendsList',
  props: {
    rowTitleVideo: {
      type: Array,
      default() {
        return []
      }
    },
    rowTitleImg: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    rowTitleVideo: {
      handler: function (newValue) {
        if (newValue.length > 0) {
          this.dataListVideo = newValue
        }
      },
      immediate: true
    },
    rowTitleImg: {
      handler: function (newValue) {
        if (newValue.length > 0) {
          this.dataListImg = newValue
        }
      },
      immediate: true
    }
  },
  components: {
    Pagination, ImageSource,
    MultipleUpload,
    SingleVideoTable,
    SingleImageTable,
    MultipleSourceVideoTable,
    MultipleSourceImgTable,
    QiniuMultipleUploadTable,
    QiniuSingleUploadTable
  },
  directives: {waves},
  filters: {
    typeFilter(status) {
      return typeKeyValue[status]
    },
    statusFilter(type) {
      return statusKeyValue[type]
    },
    downLoadStatusFilter(belongMemberId) {
      let belongMemberIdStatus = 0
      if (!belongMemberId) {
        belongMemberIdStatus = 0
      } else {
        belongMemberIdStatus = 1
      }
      return downloadStatusKeyValue[belongMemberIdStatus]
    }
  },
  data() {
    return {
      currentGoodsTitle: "",
      chooseGoodsId: null,
      showType: 1,
      listGoods: [],
      span: 2,
      formDownloadInfo: {},
      isShowDowmloadInfo: false,
      delGoodsId: [],
      currentContent: '',
      currentId: '',
      batchEditGoods: null,
      goodsEditBatchShow: false,
      batchEditContent: '',
      contentEditBatchShow: false,
      currentStartIndex: 0,
      currentEndIndex: 20,
      currentStartIndexImg: 0,
      currentEndIndexImg: 20,
      // 初始化表格数据
      tableData: [],
      tableDataVideo: [],
      tableDataImg: [],
      dataListVideo: [],
      dataListImg: [],
      fullscreenLoading: false,
      inputWithWatermarkImg: '',
      inputWithWatermarkVideo: '',
      props: {label: 'name', value: 'id', children: 'children', checkStrictly: true, multiple: true},
      tableKey: 0,
      list: null,
      total: 0,
      totalGoods: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      listQueryGoods: {
        page: 1,
        pageSize: 80
      },
      trendsForm: {},
      dialogUpdateContentVisible: false,
      dialogFormVisible: false,
      dialogVideoVisible: false,
      dialogViewVisible: false,
      dialogCommentVisible: false,
      dialogType: '',
      multipleSelection: [],
      multipleSelection2Video: [],
      multipleSelection2Img: [],
      typeOptions,
      statusOptions,
      downloadStatusOptions,
      activeName: '0',
      goodsOptions: [],
      videoUrl: '',
      trendsDetail: {},
      commentList: [],
      commentTotal: 0,
      commentListLoading: true,
      commentListQuery: {
        page: 1,
        pageSize: 20
      },
      activeNames: [],
      allCheckVideo: false,
      allCheckImg: false,
      selectedListVideo: [],
      selectedListImg: []
    }
  },
  created() {
    this.getListGoods()
    this.getList()
    this.getGoodsSelector()
  },
  computed: {

    filteredDataVideo() {
      this.tableDataVideo = this.tableDataVideo.sort(function (a, b) {
        return a.index - b.index // 按从小到大排序
      })
      return this.tableDataVideo.filter((item, index) => {
        if (index < this.currentStartIndex) {
          return false
        } else if (index > this.currentEndIndex) {
          return false
        } else {
          return true
        }
      })
    },

    filteredDataImg() {
      this.tableDataImg = this.tableDataImg.sort(function (a, b) {
        return a.index - b.index // 按从小到大排序
      })
      return this.tableDataImg.filter((item, index) => {
        if (index < this.currentStartIndexImg) {
          return false
        } else if (index > this.currentEndIndexImg) {
          return false
        } else {
          return true
        }
      })
    }
  },
  methods: {
    goTrends(item) {
      this.currentGoodsTitle = item.title
      this.showType = 2
      this.chooseGoodsId = item.id
      this.delGoodsId = item.id
      this.listQuery = {
        page: 1,
        pageSize: 20
      }
      this.activeName = "0"
      this.listQuery.goodsId = item.id
      this.getList()
    },
    backgoods() {
      this.showType = 1
      this.getListGoods()
    },
    getListGoods() {
      getListAndTrendsNum(this.listQueryGoods).then(response => {
        this.listGoods = response.data.list
        this.totalGoods = response.data.total

      })
    },
    chooseGoods(data) {
      this.listQuery.goodsId = data
      this.getList()
    },
    parseTime,
    showDownLoadInfo(data) {
      if (data.belongMemberId) {
        let formData = {
          memberId: data.belongMemberId,
          trendsId: data.id
        }
        getDownLoadInfo(formData).then((response) => {
          this.formDownloadInfo = response.data
          this.isShowDowmloadInfo = true
        })
      }

    },
    getRowKeys(row) {
      //  唯一标识
      return row.index
    },
    openBatchEditGoodsShow() {
      this.batchEditGoods = null
      this.goodsEditBatchShow = true
    },
    openBatchEditContentShow() {
      this.batchEditContent = ''
      this.contentEditBatchShow = true
    },
    confirmEditBatchContent() {
      this.handleBatchPublishContent()
    },
    confirmEditBatchGoods() {
      this.handleBatchPublishGoods()
    },
    confirmEditContent() {
      let formData = {
        id: this.currentId,
        content: this.currentContent
      }
      editTrends(formData).then((response) => {
        this.getList()
        this.dialogUpdateContentVisible = false
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handelLoadmoreVideo(currentStartIndex, currentEndIndex) {
      this.currentStartIndex = currentStartIndex
      this.currentEndIndex = currentEndIndex
    },
    handelLoadmoreImg(currentStartIndex, currentEndIndex) {
      this.currentStartIndexImg = currentStartIndex
      this.currentEndIndexImg = currentEndIndex
    },
    imageSuccessCBKVideo(arr) {
      let sources = []
      arr.forEach(v => {
        let item = {}
        item.videoUrl = v.url
        //前端上传 不需要水印地址 后台异步添加水印  后端上传的模式也待改造为异步上传水印，还没改
        // item.videoUrlWatermark=v.videoUrlWithWatermark
        item.type = 1
        item.goodsId = this.chooseGoodsId
        item.index = v.index
        sources.push(item)
      })
      this.tableDataVideo = this.tableDataVideo.concat(sources)
      this.trendsForm.type = 1
    },
    imageSuccessCBKImg(arr) {
      let sources = []
      arr.forEach(v => {
        let item = {}
        item.images = v.url
        // item.imagesUrlWatermark=v.imgUrlWithWatermark
        item.type = 3
        item.goodsId = this.chooseGoodsId
        item.index = v.index
        sources.push(item)
      })

      this.tableDataImg = this.tableDataImg.concat(sources)
      this.trendsForm.type = 3
    },

    dialogOpen() {
      this.tableDataVideo = []
      this.tableDataImg = []
      this.tableData = []
    },
    dialogClose() {

    },

    storeDataFromStore() {
      this.$confirm('保存当前数据将覆盖上次操作数据，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addDataFromStore('trendsAddVideo', JSON.stringify(this.tableDataVideo))
        this.addDataFromStore('trendsAddImg', JSON.stringify(this.tableDataImg))
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        })
      })

    },

    addDataFromStore(actionLocation, data) {
      let param = {
        'actionLocation': actionLocation,
        'data': data
      }
      let message = ''
      if (actionLocation === 'trendsAddVideo') {
        message = '短视频添加数据，保存成功'
      } else if (actionLocation === 'trendsAddImg') {
        message = '图片添加数据，保存成功'
      }
      addActionDataLog(param).then(() => {
        this.$notify({
          title: '保存记录',
          message: message,
          type: 'success',
          duration: 2000
        })
      })
    },
    getDataFromStore(actionLocation) {
      let param = {
        'actionLocation': actionLocation
      }

      getActionDataLog(param).then((res) => {
        let message = ''
        if (actionLocation === 'trendsAddVideo') {
          message = '短视频添加数据，恢复成功'
          this.tableDataVideo = JSON.parse(res.data.data)
        } else if (actionLocation === 'trendsAddImg') {
          message = '图片添加数据，恢复成功'
          this.tableDataImg = JSON.parse(res.data.data)
        }
        this.$notify({
          title: '恢复记录',
          message: message,
          type: 'success',
          duration: 2000
        })
      })
    },
    restoreDataFromStore() {
      // if (localStorage.getItem('addTrendsVideo')!==null){
      //   this.tableDataVideo = JSON.parse(localStorage.getItem('addTrendsVideo'));
      // }
      // if (localStorage.getItem('addTrendsImg')!==null){
      //   this.tableDataImg = JSON.parse(localStorage.getItem('addTrendsImg'));
      // }
      this.$confirm('恢复数据将覆盖当前窗口数据，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getDataFromStore('trendsAddVideo')
        this.getDataFromStore('trendsAddImg')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消恢复'
        })
      })

    },
    addTableRowVideo() {
      var addObj = {}
      this.$nextTick(() => {
        const index = this.tableDataVideo.length - 1
        addObj.index = index
      })
      this.rowTitleVideo.forEach(el => {
        addObj[el.code] = ''
      })
      addObj.type = 1
      addObj.goodsId = this.chooseGoodsId

      this.tableDataVideo.push(addObj)
      console.log(this.tableDataVideo)
      setTimeout(() => {
        this.$refs.addTableRowRefVideo.setCurrentRow(addObj)
      }, 10)
    },
    addTableRowImg() {
      var addObj = {}
      this.$nextTick(() => {
        const index = this.tableDataImg.length - 1
        addObj.index = index
      })
      this.rowTitleImg.forEach(el => {
        addObj[el.code] = ''
      })
      addObj.type = 3
      addObj.goodsId = this.chooseGoodsId
      this.tableDataImg.push(addObj)
      setTimeout(() => {
        this.$refs.addTableRowRefImg.setCurrentRow(addObj)
      }, 10)
    },
    clearTableRowVideo() {
      this.$confirm('确认要清空短视频上传列表吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.addTableRowRefVideo.clearSelection()

        this.tableDataVideo = []
        this.$message({
          type: 'success',
          message: '清空成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clearTableRowImg() {
      this.$confirm('确认要清空图片上传列表吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.addTableRowRefImg.clearSelection()
        this.tableDataImg = []
        this.$message({
          type: 'success',
          message: '清空成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteRow(index, rows) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    inputWithWatermarkImgMethod(val1, val2) {
      this.tableDataImg[val2.$index].imagesUrlWatermark = val1
    },
    inputWithWatermarkVideoMethod(val1, val2) {
      this.tableDataVideo[val2.$index].videoUrlWatermark = val1
    },
    getGoodsSelector() {
      getGoodsList({page: 1, pageSize: 999999}).then(response => {
        this.goodsOptions = response.data.list
      })
    },
    getList() {
      this.listLoading = true
      getTrendsList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selectAllVideo() {
      if (!this.allCheckVideo) {
        // 全选选中时当前页所有数据选中,使用后台所有数据进行遍历.
        // 把所有数据赋值给当前选中变量，遍历所有数据
        this.selectedListVideo = this.tableDataVideo
        this.tableDataVideo.forEach((row) => {
          if (row) {
            //为table添加ref属性 table
            this.$refs.addTableRowRefVideo.toggleRowSelection(row, true)
            this.selectedListVideo = []
          }
        })
        this.allCheckVideo = true
      } else {
        this.$refs.addTableRowRefVideo.clearSelection()
        this.allCheckVideo = false
        this.selectedListVideo = []
      }
    },
    selectAllImg() {
      if (!this.allCheckImg) {
        // 全选选中时当前页所有数据选中,使用后台所有数据进行遍历.
        // 把所有数据赋值给当前选中变量，遍历所有数据
        this.selectedListImg = this.tableDataImg
        this.tableDataImg.forEach((row) => {
          if (row) {
            //为table添加ref属性 table
            this.$refs.addTableRowRefImg.toggleRowSelection(row, true)
            this.selectedListImg = []
          }
        })
        this.allCheckImg = true
      } else {
        this.$refs.addTableRowRefImg.clearSelection()
        this.allCheckImg = false
        this.selectedListImg = []
      }
    },
    handleSelectionChange2Video(selection) {
      for (let i in selection) {
        const index = this.tableDataVideo.findIndex((item) => item === selection[i])
        if (index !== -1) {
          selection[i].index = index
        } else {
          console.error('未能找到对应的行')
        }
      }
      this.multipleSelection2Video = selection
    },
    handleSelectionChange2Img(selection) {
      for (let i in selection) {
        const index = this.tableDataImg.findIndex((item) => item === selection[i])
        if (index !== -1) {
          selection[i].index = index
        } else {
          console.error('未能找到对应的行')
        }
      }
      this.multipleSelection2Img = selection
    },

    handleCreate() {
      //发布前检查是否为会员
      checkShopLevel().then(response => {
        this.inputWithWatermarkImg = ''
        this.inputWithWatermarkVideo = ''
        this.trendsForm = {
          type: 1
        }
        this.dialogStatus = 'add'
        this.dialogFormVisible = true
        this.getGoodsSelector()
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    confirm() {
      //将视频数组和图片数组合并在一起
      // if (this.trendsForm.type === 1) {
      //   this.tableData = this.tableDataVideo
      // } else if (this.trendsForm.type === 3) {
      //   this.tableData = this.tableDataImg
      // }
      this.tableData = this.tableDataVideo.concat(this.tableDataImg)
      //检查是否有空
      let valid = true
      if (this.tableData.length === 0) {
        this.$notify({
          title: '失败',
          message: '至少添加一条数据',
          type: 'error',
          duration: 2000
        })
        valid = false
      }
      let message = ''
      this.tableData.forEach(item => {
        if (item.type === 1 && (!item.content || typeof item.videoUrl === 'undefined' || !item.goodsId)) {
          message = '短视频中存在未填写的内容'
          valid = false
        } else if (item.type === 3 && (!item.content || typeof item.images === 'undefined' || !item.goodsId)) {
          message = '图片中存在未填写的内容'
          valid = false
        }
      })
      if (valid) {
        console.log("this.tableData", this.tableData)
        let goodsIds = []
        this.tableData.forEach(item => {
          item.goodsId = item.goodsId + ''
          item.goodsIdList = item.goodsId.split(',')
          item.location = 1
        })
        let jsonArrayStr = JSON.stringify(this.tableData)

        let param = {
          trendsList: jsonArrayStr
        }
        publishTrendsBatch(param).then(() => {
          this.getList()
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '发布成功',
            type: 'success',
            duration: 2000
          })

        })
      } else {
        this.$notify({
          title: '失败',
          message: message,
          type: 'error',
          duration: 2000
        })
      }

    },
    createWatermark() {
      const createVals = this.multipleSelection
      if (!createVals || createVals.length <= 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.$confirm('您确定要重新生成这些记录的水印吗?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let values = []
        createVals.forEach(val => {
          values.push(val.walkTrends)
        })
        createWatermark({'trendsLists': JSON.stringify(values)}).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '生成成功',
            type: 'success',
            duration: 2000
          })
        })
      })
        .catch(err => {
          console.error(err)
        })
    },
    handleDeleteByGoods() {
      if (!this.delGoodsId) {
        this.$message({
          message: '请先选择一个商品',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.$confirm('您确定要删除这些记录?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          goodsId: this.delGoodsId
        }
        deleteTrendsByGoodsId(param).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
        .catch(err => {
          console.error(err)
        })
    },
    handleDeleteByDown() {
      this.$confirm('您确定要删除这些记录?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        deleteTrendsByDown().then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
        .catch(err => {
          console.error(err)
        })
    },
    handleDelete() {
      const delVals = this.multipleSelection
      if (!delVals || delVals.length <= 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.$confirm('您确定要删除这些记录?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let values = []
        delVals.forEach(val => {
          values.push(val.walkTrends.id)
        })
        deleteTrends(values.join(',')).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
        .catch(err => {
          console.error(err)
        })
    },
    handleBatchPublishContent() {
      let delVals = []
      if (this.trendsForm.type === 1) {
        delVals = this.multipleSelection2Video
      } else if (this.trendsForm.type === 3) {
        delVals = this.multipleSelection2Img
      }

      if (!delVals || delVals.length <= 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.$confirm('您确定要批量添加文案吗?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        delVals.forEach((val, index) => {
          if (this.trendsForm.type === 1) {
            this.$set(this.tableDataVideo[val.index], 'content', this.batchEditContent)
          } else if (this.trendsForm.type === 3) {
            this.$set(this.tableDataImg[val.index], 'content', this.batchEditContent)
          }

        })
        this.contentEditBatchShow = false
      })
        .catch(err => {
          console.error(err)
        })
    },
    handleBatchPublishGoods() {
      let delVals = []
      if (this.trendsForm.type === 1) {
        delVals = this.multipleSelection2Video
      } else if (this.trendsForm.type === 3) {
        delVals = this.multipleSelection2Img
      }
      if (!delVals || delVals.length <= 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.$confirm('您确定要批量添加所属商品吗?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        delVals.forEach((val, index) => {
          if (this.trendsForm.type === 1) {
            this.$set(this.tableDataVideo[val.index], 'goodsId', this.batchEditGoods)
          } else if (this.trendsForm.type === 3) {
            this.$set(this.tableDataImg[val.index], 'goodsId', this.batchEditGoods)
          }
        })
        this.goodsEditBatchShow = false
      })
        .catch(err => {
          console.error(err)
        })
    },
    handleClickTab(tab, event) {
      this.listQuery = {
        page: 1,
        pageSize: 20,
        goodsId: this.chooseGoodsId
      }
      this.activeName = tab.name
      this.listQuery.type = this.activeName == '0' ? null : this.activeName
      this.getList()
    },
    viewVideo(row) {
      this.videoUrl = ''
      this.videoUrl = row.videoUrl
      this.dialogVideoVisible = true
      document.getElementById('playVideos').src = row.videoUrl
      document.getElementById('playVideos1').src = row.videoUrl
      document.getElementById('playVideos2').src = row.videoUrlWatermark
    },
    closeVideoDialog() {
      document.getElementById('playVideos').src = ''
      document.getElementById('playVideos1').src = ''
      document.getElementById('playVideos2').src = ''
      this.dialogVideoVisible = false
    },
    updateContent(data) {
      this.currentContent = data.walkTrends.content
      this.currentId = data.walkTrends.id
      this.dialogUpdateContentVisible = true
    },
    handleViewTrends(row) {
      this.trendsDetail = row.walkTrends
      this.dialogViewVisible = true
    },
    handleViewComment(trendsId) {
      this.commentListQuery.trendsId = trendsId
      this.getCommentList()
      this.dialogCommentVisible = true
    },
    getCommentList() {
      getCommentList(this.commentListQuery).then(response => {
        this.commentList = response.data.list
        this.commentTotal = response.data.total
        this.commentListLoading = false
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.el-radio {
  margin-right: 0px !important;
}

.el-select-dropdown {
  span {
    white-space: pre !important;
  }
}

.el-select-dropdown__item {
  white-space: pre !important;
}

</style>
<style scoped>
.el-table__body-wrapper .el-table__row td {
  display: none;
}

.el-table__body-wrapper .el-table__row {
  height: 38px;
}


</style>
